<template>
  <div class="pay">
    <el-tabs>
      <el-tab-pane label="在线充值"></el-tab-pane>
      <el-tab-pane label="对公账户"></el-tab-pane>
    </el-tabs>
    <el-form label-width="80px" ref="formRef" :model="formData" :rules="rules">
      <el-form-item label="账户余额">
        <div class="w-full">
          <div class="display-flex show-money"><span>￥</span>{{ formData.money }}</div>
        </div>
      </el-form-item>
      <el-form-item label=" " prop="account">
        <el-input-number v-model="formData.account" class="account" placeholder="输入其他充值金额" controls-position="right"
          style="width: 200px"></el-input-number>
        <div class="tips">
          <img class="icon-svg" src="@/assets/images/alpay.svg" alt="welcome" />
          <img class="icon-svg" src="@/assets/images/wechat.svg" alt="welcome" />
          <span>支持支付宝、微信扫码支付。</span>
          <span class="red">大额充值联系客服</span>
        </div>
      </el-form-item>
      <el-form-item label="充值余额">
        <div class="flex">
          <div class="recharge-list" v-for="item in list" :key="item.value" @click="onClickItem(item)"
            :class="{ 'select-recharge': formData.account === item.value }">
            <div><span class="unit">￥</span><span class="money">{{ item.value }}</span></div>
            <div class="text">成长值加{{ item.value }}</div>
          </div>
        </div>
        <div class="tips-box">
          <el-alert title="温馨提示" type="warning" description="充值金额只能用于消耗，开票后不可提现" show-icon :closable="false">
          </el-alert>
        </div>
        <div class="text-box">
          当前成长值：<span class="color">0</span><span class="text2">（充值1元获得1成长值）</span>
        </div>
      </el-form-item>
      <el-form-item label="支付金额">
        <div class="w-full">
          <div class="display-flex show-money"><span>￥</span>{{ formData.payMoney }}</div>
        </div>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-radio-group v-model="formData.payType">
          <div class="pay-box">
            <img class="pay-svg pay-svg1" src="@/assets/images/alpay.svg" alt="welcome" />
            <el-radio label="alipay"> 支付宝</el-radio>
          </div>
          <div class="pay-box">
            <img class="pay-svg" src="@/assets/images/wechat.svg" alt="welcome" />
            <el-radio label="wechat">微信</el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-button @click="onSumbit">下一步</el-button>



    <el-dialog v-model="visible" title="支付" width="550px" draggable>
      <div class="flex" style="align-items: center;m">支付金额：
        <div class="display-flex show-money"><span>￥</span>{{ formData.account }}</div>
      </div>
      <div v-if="formData.payType == 'alipay'" class="paytype"><img class="icon-svg" src="@/assets/images/alpay.svg"
          alt="welcome" />支付宝扫码支付</div>
      <div v-else class="paytype"> <img class="icon-svg" src="@/assets/images/wechat.svg" alt="welcome" />微信扫码支付</div>
      <div class="qrCode">
        <img src="@/assets/images/qrCode.jpg" width="300" alt="">
      </div>
      <div class="color refresh">刷新二维码</div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="home">
import { ElNotification } from 'element-plus'
import { ref } from "vue";
const formData = ref({ money: "0.00", payMoney: '0', payType: '', account: undefined });
const list = ref([
  { value: 50 },
  { value: 100 },
  { value: 300 },
  { value: 500 },
  { value: 1000 }
])

const formRef = ref()

const visible = ref(false)

const rules = ref({
  account: [{ required: true, message: '请输入其他充值金额', trigger: 'blur' }],
  payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }]
})
const onClickItem = (item: any) => {
  formData.value.account = item.value;
}

const onSumbit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      visible.value = true;

      setTimeout(() => {
        visible.value = false
        ElNotification.success({
          title: '支付成功'
        })

      }, 3000)
    }
  })
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
